<template>
	<view class="row itemFourContainer" @tap="navigateTo(entrance)">
		<product-item-image :src="src" :dSrc="dSrc" :size="'220rpx'" />
		<view class="col flex1 right" style="padding-left: 20rpx;">
			<view class="col flex1 titleWrap">
				<product-item-title :text="title" :label="titleLabel" :lines="2" style="margin-top: 10rpx;" />
				<product-item-discount v-if="discount" :text="discount" />
			</view>
			<view class="row priceWrap" style="align-items: flex-end;">
				<product-item-price :text="price" />
				<product-item-original-price v-if="originalPrice" :text="originalPrice" style="margin-left: 10rpx;" />
			</view>
		</view>
		<product-item-btn size="big" class="productBtn" />
	</view>
</template>

<script>
	import productMixins from '@/mixins/productMixins.js'
	
	export default {
		mixins: [productMixins],
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	.itemFourContainer {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		flex-direction: row;
		/* #endif */
		padding: 20rpx;
		background-color: #ffffff;
		position: relative;
	}
	
	.right {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		flex-direction: col;
		/* #endif */
		flex: 1;
		justify-content: space-between;
	}
	
	.titleWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		flex-direction: col;
		/* #endif */
	}
	
	.priceWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		flex-direction: row;
		/* #endif */
	}
	
	.productBtn {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}
</style>
